<template>
  <div class="container">
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">合约</mt-tab-item>
      <mt-tab-item id="2">秒合约</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div class="container">
          <div class="head">
            <div class="head-left">名稱</div>
            <div class="head-center">最新價格</div>
            <div class="head-right"> 漲跌幅</div>
          </div>
          <div class="goods" v-show="isLoading" v-for="item in goodsData" @click="goPage(item.pid)">
            <div class="number">
              <div class="number-name">{{item.ptitle}}</div>
              <div class="number-price" >{{item.Price}}</div>
              <div class="number-change">
                <div class="number-bg" v-if="item.bfb>0" style="background: #4BAC92">+{{item.bfb}}%</div>
                <div class="number-bg" v-else style="background:  #D04B63">-{{item.bfb}}%</div>
              </div>
            </div>
            <div class="line"></div>
          </div>

          <div class="goods" v-show="!isLoading" v-for="item in defaultData" @click="goPage(item.pid)">
            <div class="number">
              <div class="number-name">{{item.ptitle}}</div>
              <div class="number-price" >{{item.Price}}</div>
              <div class="number-change">
                <div class="number-bg" v-if="item.bfb>0" style="background: #4BAC92">+{{item.bfb}}%</div>
                <div class="number-bg" v-else style="background:  #D04B63">-{{item.bfb}}%</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="container">
          <div class="head">
            <div class="head-left">名稱</div>
            <div class="head-center">最新價格</div>
            <div class="head-right"> 漲跌幅</div>
          </div>
          <div class="goods" v-show="isLoading" v-for="item in goodsData" @click="goPage(item.pid)">
            <div class="number">
              <div class="number-name">{{item.ptitle}}</div>
              <div class="number-price" >{{item.Price}}</div>
              <div class="number-change">
                <div class="number-bg" v-if="item.bfb>0" style="background: #4BAC92">+{{item.bfb}}%</div>
                <div class="number-bg" v-else style="background:  #D04B63">-{{item.bfb}}%</div>
              </div>
            </div>
            <div class="line"></div>
          </div>

          <div class="goods" v-show="!isLoading" v-for="item in defaultData" @click="goPage(item.pid)">
            <div class="number">
              <div class="number-name">{{item.ptitle}}</div>
              <div class="number-price" >{{item.Price}}</div>
              <div class="number-change">
                <div class="number-bg" v-if="item.bfb>0" style="background: #4BAC92">+{{item.bfb}}%</div>
                <div class="number-bg" v-else style="background:  #D04B63">-{{item.bfb}}%</div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
   <tabar :timer="timer" :isCheck="3"></tabar>
  </div>
</template>

<script>

    import Tabar from '../../components/tabbar'
    import { Navbar, TabItem } from 'mint-ui';
    import {getIndex} from '../../api/indexData';
    import Vue from 'vue';
    import {getUserInfo} from "../../api/getUserInfo";
    Vue.component(Navbar.name, Navbar);
    Vue.component(TabItem.name, TabItem);


  export default {
    name: "index",
    data(){
        return {
            goodsData:{},
            selected:'1',
            userInfo:{},
            timer:null,
          defaultData:{
            0:{
              pid:12,
              Price:0,
              bfb:0,
              ptitle:'BTC'
            },
            1:{
              pid:17,
              Price:0,
              bfb:0,
              ptitle:'ETH'
            },
            2:{
              pid:6,
              Price:0,
              bfb:0,
              ptitle:'USDT'
            },
          },
           isLoading:false
        }
    },
      components:{
          Tabar
      },
     methods:{
      goodsInfo(){

        getIndex().then((data)=>{
          this.goodsData=data;
          this.isLoading=true
        });

      },

        //登录注册切换
        goPage: function (pid) {
          this.$router.push({
            name: 'kine',
            query: {
              pid: pid,
              indexTimer:this.timer
            }
          })
        }


    },

    mounted() {

      if (!window.localStorage.getItem('userInfo')) {
        this.$router.push({path:'/'})
      }else {
        this.userInfo=JSON.parse(window.localStorage.getItem('userInfo'))
        getUserInfo({
          uid:this.userInfo.uid
        }).then((data)=>{


          if (data.errorCode==0){
            window.localStorage.setItem('userInfo',JSON.stringify(data.data))
          }
        });

       this.timer=setInterval(this.goodsInfo,3000)

      }

    }

  }
</script>

<style scoped >
  .container {
    width: 375px;
  }

  .head {
    width: 375px;
    height: 50px;
    font-size: 10px;
    display: flex;
    flex-direction: row;
    line-height: 50px;
    align-items: center;
    justify-content: center;
  }


  .head-left {
    width: 108px;
  }

  .head-center {
    width: 108px;
  }

  .head-right {
    padding-left: 50px;
    width: 108px;
  }

  .goods {
    width: 375px;
    display: flex;
    height: 60px;
    flex-direction: column;
  }

  .number {
    display: flex;
    flex-direction: row;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
  }

  .number-name {
    width: 30%;
    margin-left: 16px;
  }

  .number-price {
    width: 30%;
  }

  .number-change {
    width: 24%;
    position: relative;
    left: 30px;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .number-bg {
    background-color: #4BAC92;
    font-weight: bold;
    display: flex;
    width: 80px;
    height: 26px;
    justify-content: center;
    align-items: center
  }

  .line {
    width: 350px;
    height: 2px;
    margin-left: 10px;
    background-color: #ccc;
  }

</style>
